<template>
  <div class="homeMain">
    <div class="home-left">
      <el-carousel :interval="4000" type="card" height="180px">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <div class="imgContent">
            <img :src="item.imageUrl" alt="" />
          </div>
        </el-carousel-item>
      </el-carousel>

      <fdCard
        :cardOption="hotCardOption"
        :activeName="hotActiveName"
        cardTitle="热门推荐"
        @changeActive="hotChangeActive"
      >
        <div
          class="hot-recommend-collectionItem"
          v-for="item in hotRecommendList"
          :key="item.id"
        >
          <div class="collection-cover">
            <img :src="item.coverImgUrl" alt="" />
            <span class="collectionInfo">
              <span
                ><el-icon
                  size="14"
                  style="vertical-align: bottom; padding-right: 4px"
                >
                  <Headset /> </el-icon
                >{{ playCountFilter(item.playCount) }}</span
              >
              <span>/</span>
              <span>{{ item.trackCount }}首</span>
            </span>
          </div>
          <div class="collection-content">
            <div class="collection-title">{{ item.name }}</div>
            <div class="collection-tag">{{ tagsFilter(item.tags) }}</div>
          </div>
        </div>
      </fdCard>

      <fdCard
        :cardOption="discCardOption"
        :activeName="discActiveName"
        cardTitle="新碟上架"
        @changeActive="discChangeActive"
      >
        <div class="newDiscItem" v-for="item in newDiscList" :key="item.id">
          <div class="newDisc-cover">
            <img :src="item.picUrl" alt="" />
          </div>
          <div class="newDisc-info">
            <div>{{ item.name }}</div>
            <div style="color: #999; margin-top: 4px">
              {{ item.artist?.name }}
            </div>
          </div>
          <div class="newDisc-tags">{{ item.type }}</div>
        </div>
      </fdCard>

      <!-- 排行榜 -->
      <div class="rankingList">
        <fdRanking :soaringList="soaringList" />
      </div>

      <fdCard
        :cardOption="mvCardOption"
        :activeName="mvActiveName"
        cardTitle="最新MV"
        @changeActive="mvChangeActive"
      >
        <div class="mvItem" v-for="item in mvList" :key="item.id">
          <div class="mvUrl">
            <img :src="item.cover" alt="" />
            <div class="mvBox"></div>
            <span class="mvUrlIcon" style="color: #fff">
              <el-icon size="45"> <VideoPlay /> </el-icon>
            </span>
          </div>
          <div class="mvInfo">
            <div class="mvTitle">
              {{ item.name }}
            </div>
            <div class="mvAuth">
              {{ item.artistName }}
            </div>
            <div class="mvLook">
              <el-icon size="20" style="padding-right: 5px">
                <VideoCameraFilled /> </el-icon
              >{{ playCountFilter(item.playCount) }}人观看
            </div>
          </div>
        </div>
      </fdCard>

      <div class="cardMain">
        <div class="cardBox">
          <div class="cardTitle">热门电台</div>
          <div class="cardList"></div>
        </div>

        <div class="cardBox" style="margin-left: 20px">
          <div class="cardTitle">热门歌手</div>
          <div class="cardList"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, computed, inject } from "vue";
import fdCard from "../../components/fd-card.vue";
import fdRanking from "../../components/fd-ranking.vue";

const axios = inject("$axios");
const bannerList = ref([]);
const hotRecommendList = ref([]);
const newDiscList = ref([]);
const soaringList = ref([]);
const mvList = ref([]);
const HotbbcList = ref([]);

const hotCardOption = ref([
  {
    lable: "为你推荐",
    value: "a1",
  },
  {
    lable: "华语",
    value: "a2",
  },
  {
    lable: "流行",
    value: "a3",
  },
  {
    lable: "摇滚",
    value: "a4",
  },
  {
    lable: "民谣",
    value: "a5",
  },
  {
    lable: "电子",
    value: "a6",
  },
]);
const hotActiveName = ref("a1");

const discCardOption = ref([
  {
    lable: "全部",
    value: "a1",
  },
  {
    lable: "华语",
    value: "a2",
  },
  {
    lable: "欧美",
    value: "a3",
  },
  {
    lable: "韩国",
    value: "a4",
  },
  {
    lable: "日本",
    value: "a5",
  },
]);
const discActiveName = ref("a1");

const mvCardOption = ref([
  {
    lable: "全部",
    value: "a1",
  },
  {
    lable: "内地",
    value: "a2",
  },
  {
    lable: "港台",
    value: "a3",
  },
  {
    lable: "欧美",
    value: "a4",
  },
  {
    lable: "日本",
    value: "a5",
  },
  {
    lable: "韩国",
    value: "a5",
  },
]);
const mvActiveName = ref("a1");

// 获取轮播图
const getBanner = async () => {
  const { data: resData } = await axios.get(
    "http://127.0.0.1:3000/banner?type=0"
  );
  bannerList.value = resData.banners;
  console.log(bannerList);
};

// 热门推荐
const getHotRecommend = async () => {
  const { data: resData } = await axios.get(
    "http://127.0.0.1:3000/top/playlist?limit=6&order=hot&cat=&offset=0"
  );
  hotRecommendList.value = resData.playlists;
};

// 标签过滤器
const tagsFilter = (tagList: Object) => {
  let tagStr = "";
  for (const key in tagList) {
    tagStr = tagStr + "#" + tagList[key];
  }
  return tagStr;
};

// 处理播放数过万
const playCountFilter = (num: number) => {
  if (num > 9999) {
    return Math.round(num / 1000) / 10 + "万";
  } else {
    return num;
  }
};

// 新碟上架
const getNewDiscList = async () => {
  const { data: resData } = await axios.get(
    "http://127.0.0.1:3000/top/album?limit=15&offset=0&area=all&type=new&year=&month="
  );
  newDiscList.value = resData.monthData.slice(0, 15);
};

// 排行榜
const getSoaringList = async () => {
  soaringList.value = [];
  const soaringId = ["19723756", "3779629", "2884035", "3778678"];

  soaringId.forEach(async (item) => {
    const { data: resData } = await axios.get(
      `http://127.0.0.1:3000/playlist/detail?id=${item}&s=8`
    );
    const ObjData = {
      name: resData.playlist.name,
      updateTime: resData.playlist.updateTime,
      tracks: resData.playlist.tracks.slice(0, 10),
    };
    soaringList.value.push(ObjData);
  });
};

// MV
const getMvList = async () => {
  const { data: resData } = await axios.get(
    `http://127.0.0.1:3000/mv/all?area=&type=&order=&limit=15&offset=0`
  );
  mvList.value = resData.data;
};

// 热门电台
const getHotbbc = async () => {
  const { data: resData } = await axios.get(
    `http://127.0.0.1:3000/dj/hot?limit=6&offset=0`
  );
  HotbbcList.value = resData.data;
};

const hotChangeActive = (row: any) => {
  console.log(row.lable);
};

const discChangeActive = (row: any) => {
  console.log(row.lable);
};

const mvChangeActive = (row: any) => {
  console.log(row.lable);
};

onMounted(() => {
  getBanner();
  getHotRecommend();
  getNewDiscList();
  getSoaringList();
  getMvList();
  getHotbbc();
});
</script>

<style scoped lang="scss">
$titleColor: #ff0003;
.homeMain {
  display: flex;
  .home-left {
    margin-right: 20px;

    .hot-recommend-collectionItem {
      width: 228px;
      height: 290px;
      margin-right: 30px;
      margin-bottom: 20px;
      .collection-cover {
        width: 100%;
        height: 220px;
        border-radius: 8px;
        background-color: #f3f3f3;
        cursor: pointer;
        margin-bottom: 5px;
        position: relative;
        z-index: 1;

        .collectionInfo {
          display: inline-block;
          position: absolute;
          right: 0px;
          top: 0px;
          background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.5) 97%,
            rgba(0, 0, 0, 0.5) 100%
          );
          z-index: 2;
          font-size: 12px;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: 4px 10px;
          padding-right: 4px;
          color: #fff;
          border-top-right-radius: 3px;

          span {
            padding-right: 4px;
          }
        }

        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }

        &::before {
          content: "";
          width: 145px;
          height: 208px;
          background-color: #dbdbdb;
          position: absolute;
          top: 5px;
          right: -5px;
          z-index: -1;
          border-radius: 3px;
        }

        &::after {
          content: "";
          width: 135px;
          height: 198px;
          background-color: #f3f3f3;
          position: absolute;
          top: 10px;
          right: -10px;
          z-index: -2;
          border-radius: 3px;
        }
      }
      .collection-content {
        box-sizing: border-box;
        padding: 5px;
        font-size: 14px;
        .collection-tag {
          font-size: 12px;
          color: $titleColor;
          padding-top: 8px;
        }
      }
    }

    .newDiscItem {
      width: 298px;
      height: 110px;
      background-color: #f3f3f3;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      overflow: hidden;
      margin-bottom: 13px;
      margin-right: 12px;
      border-radius: 8px;
      cursor: pointer;

      .newDisc-cover {
        width: 110px;
        height: 110px;
        position: relative;
        z-index: 1;
        img {
          width: 100%;
          height: 100%;
        }

        &::after {
          display: inline-block;
          content: "";
          position: absolute;
          top: 0;
          z-index: -1;
          right: -20px;
          width: 100%;
          height: 100%;
          background: url("../../assets/img/disc.png") no-repeat;
          background-size: contain;
          transition: all 0.4s linear;
        }
      }

      .newDisc-info {
        flex: 1;
        font-size: 12px;
        margin-left: 30px;
        &:hover {
          color: $titleColor;
        }
      }

      .newDisc-tags {
        font-size: 12px;
        position: absolute;
        right: -46px;
        top: 5px;
        width: 120px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: $titleColor;
        color: #fff;
        transform: rotate(45deg) scale(0.8);
      }
    }

    .mvItem {
      width: 294px;
      height: 250px;
      margin-bottom: 15px;
      margin-right: 16px;
      font-size: 14px;
      .mvUrl {
        width: 100%;
        height: 147px;
        background-color: aliceblue;
        border-radius: 8px;
        overflow: hidden;
        position: relative;

        .mvBox {
          width: 100%;
          height: 147px;
          background: rgba(0, 0, 0, 0.2);
          position: absolute;
          top: 0px;
          left: 0px;
          z-index: 1;
        }

        .mvUrlIcon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 2;
        }

        img {
          width: 100%;
        }
      }

      .mvTitle {
        margin-top: 8px;
      }

      .mvAuth {
        margin: 5px 0px;
        color: #999;
        font-size: 12px;
      }

      .mvLook {
        font-size: 12px;
        display: flex;
        align-items: end;
      }
    }

    .rankingList {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
    }

    .cardMain {
      display: flex;
      justify-content: space-between;
    }

    .cardBox {
      margin-top: 20px;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 15px;
      background-color: #fff;
      flex: 1;

      .cardTitle {
        font-size: 24px;
        font-weight: 600;
      }
    }
  }
}
.el-carousel__item .imgContent {
  img {
    height: 180px;
    width: 100%;
    object-fit: scale-down;
  }
}
</style>